<!--后台首页-->
<template>
    <el-container class="home">
        <el-aside :width="navWidth">
            <!--logo-->
            <div class="logoCalzz">
                <div style="text-align: center">
                    <Avatar :size="40" shape="circle" :circle-url="backPicUrl"
                            style="width : 40px;height: 40px;float:left;
                                background-color: white;
                                margin-top: 10px;
                                margin-left: 10px;"></Avatar>
                    <span v-if="this.isCollapse!=true"
                          style="display: inline-block; width : 100px;height: 60px;float:left;line-height: 60px;
                             font-weight: lighter;font-family: 'Microsoft YaHei';font-size: 22px;color: #FFFFFF;">新华夏</span>
                </div>
            </div>
            <!--滚动-->
            <el-scrollbar class="scrollbarClass">
                <el-menu router :default-active="backHomeHeader" class="el-menu-vertical-demo" :collapse="isCollapse"
                         background-color="rgb(37,50,56)"
                         text-color="#FFFFFF"
                         active-text-color="#fff"
                         menu-trigger="hover"
                >

                    <el-menu-item :index="backHomeHeader+'EchartsList'">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-submenu index="1">
                        <template slot="title" class="borderLine">
                            <i class="el-icon-s-shop"></i>
                            <span slot="title">前台管理</span>
                        </template>

                        <el-menu-item :index="backHomeHeader+'Events'">
                            <i class="el-icon-s-shop"></i>
                            活动商品</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'SalesHigh'">
                            <i class="el-icon-s-shop"></i>
                            本周热卖</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'Boutique'">
                            <i class="el-icon-s-shop"></i>
                            精品推荐</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'Tideway'">
                            <i class="el-icon-s-shop"></i>
                            潮流搭配</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'HomeSlideshow'">
                            <i class="el-icon-s-shop"></i>
                            首页轮播图</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-s-goods"></i>
                            <span slot="title">商品中心</span>
                        </template>
                        <el-menu-item :index="backHomeHeader+'GoodsList'">
                            <i class="el-icon-s-shop"></i>
                            商品列表</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'AddGoods'">
                            <i class="el-icon-s-shop"></i>
                            添加商品</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'FuturePart'">
                            <i class="el-icon-s-shop"></i>
                            上传图片</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'FuturePart'">
                            <i class="el-icon-s-shop"></i>
                            商品分类</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'FuturePart'">
                            <i class="el-icon-s-shop"></i>
                            品牌管理</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'FuturePart'">
                            <i class="el-icon-s-shop"></i>
                            商品图片</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-s-order"></i>
                            <span slot="title">订单中心</span>
                        </template>
                        <el-menu-item :index="backHomeHeader+'UserOrderList'">
                            <i class="el-icon-s-shop"></i>
                            订单列表</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'OrderList'">
                            <i class="el-icon-s-shop"></i>
                            订单详情</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'FuturePart'">
                            <i class="el-icon-s-shop"></i>
                            订单设置</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'FuturePart'">
                            <i class="el-icon-s-shop"></i>
                            退货设置</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span slot="title">用户中心</span>
                        </template>
                        <el-menu-item :index="backHomeHeader+'UserList'">
                            <i class="el-icon-s-shop"></i>
                            用户列表</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'AddUser'">
                            <i class="el-icon-s-shop"></i>
                            新建用户</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'FuturePart'">
                            <i class="el-icon-s-shop"></i>
                            权限设置</el-menu-item>
                        <el-menu-item :index="backHomeHeader+'FuturePart'">
                            <i class="el-icon-s-shop"></i>
                            个人信息</el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-s-tools"></i>
                                <span slot="title">系统中心</span>
                            </template>
                            <el-menu-item :index="backHomeHeader+'FuturePart'">
                                <i class="el-icon-s-shop"></i>
                                修改密码</el-menu-item>
                            <el-menu-item :index="backHomeHeader+'FuturePart'">
                                <i class="el-icon-s-shop"></i>
                                退出系统</el-menu-item>
                            <el-menu-item :index="backHomeHeader+'TextLeader'">
                                <i class="el-icon-s-shop"></i>
                                导航栏</el-menu-item>
                        </el-submenu>
                </el-menu>
            </el-scrollbar>
        </el-aside>

        <el-container class="home">
            <el-header height="60px">
                <div class="switchNav"  @click="changeCollapse">
                    <i :class="iconValue"></i>
<!--                    <el-button class="switchBtn" type="primary" :icon="iconValue"/>-->
                </div>
                <!--头像-->
                <div class="headerShow" >
                    <div v-if="userData!=null">
                        <HearderLogin :data="userData" @exittologin="clearUser">
                        </HearderLogin>
                    </div>
                    <div v-else>
                        <HearderNotLogin></HearderNotLogin>
                    </div>
                </div>
            </el-header>
            <el-main class="main_router">
                <el-scrollbar class="backHomeScrollbar">
                    <router-view/>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>

</template>

<script>
    import BackToTop from "../../components/BackToTop";
    import HearderLogin from "../../components/HearderLogin";
    import HearderNotLogin from "../../components/HearderNotLogin";
    import Avatar from "../../components/Avatar";
    export default {
        name: "BackHome",
        components: {
            BackToTop,
            HearderNotLogin,
            HearderLogin,
            Avatar,
        },
        data() {
            return {
                backHomeHeader:'/BackHome/',
                isCollapse: false,
                navWidth:'180px',
                iconValue:'el-icon-s-fold',
                backPicUrl: require('../../assets/(116).png'),
                userData:{}
            };
        },
        created() {
            this.loadCategoryData();
            this.validateUser()
        },
        methods: {
            validateUser(){
                let user = window.sessionStorage.getItem("user");
                if (user!=null){
                    this.userData = JSON.parse(user);
                }else {
                    this.userData = null;
                }
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            changeCollapse(){
                this.isCollapse = !this.isCollapse;
                this.navWidth = this.isCollapse==true?'64px':'180px';
                this.iconValue = this.isCollapse==true?'el-icon-s-unfold':'el-icon-s-fold';
            },
            clearUser(val){
                console.log(val);
                this.userData = val;
                console.log(this.userData);
            },
            loadCategoryData(){
                    this.$axios.get("/firstcategory/list").then(result=>{
                        this.$store.commit('setFirstCategory',result.data);
                    }).catch(err=>{
                        console.log(err)
                    });
                    this.$axios.get("/secondcategory/list").then(result=>{
                        this.$store.commit('setSecondCategory',result.data);
                    }).catch(err=>{
                        console.log(err)
                    });
            },
        },
        mounted() {

        },
        computed:{

        },
    }
</script>


<style scoped>
    .home{
        width: 100%;
        height: 100%;
        /*overflow: hidden;*/
    }
    .borderLine{
        outline: 1px solid #ff232a;
        background-color: #00A8FF;
    }
    .scrollbarClass{
        height: 100vh;
        background-color: rgb(37, 50, 56);
    }
    /deep/.el-scrollbar__wrap {
        overflow-x: hidden;
    }
    .switchNav{
        display: inline-block;
        width: 60px;
        height: 60px;
        /*border: 1px solid red;*/
        line-height: 60px;
        float: left;
        padding: 0;
        font-size: 32px;
        color: #999999;
    }
    .headerShow{
        float: right;
        margin-right: 20px;
        height: 45px;
        width: 200px;
        /*border: 1px solid red;*/
        /*overflow: hidden;*/
    }
    .el-menu-item{
        /*width: 180px;*/
        text-align: left;
    }
    .el-menu-item:hover{
        background-color: #6a707a!important;
        text-align: left;
    }
    .el-menu-item.is-active{
        background-color: #6a707a!important;
        /*text-align: right;*/
        color:white ;
    }
    .el-submenu{
        text-align: left;
        /*outline: 1px solid #ff1518;*/
        /*overflow: hidden;*/
    }

    .switchBtn{
        float: left;
        height: 45px;
        width: 45px;
        font-size: 22px;
        padding: 0;
        /*outline: 1px solid #ff1518;*/

    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 180px;
        min-height: 400px;
    }
    .el-header, .el-footer {
        background-color: #ffffff;
        color: #333;
        /*text-align: center;*/
        /*line-height: 60px;*/
        padding: 0;
        /*border-bottom: 1px #999999 solid;*/
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
    .el-menu-item,.el-aside{
        transition: all .4s ease-in-out;
    }
    .el-aside {
        background-color: rgba(244, 247, 249, 0.62);
        color: #333;
        text-align: center;
        height: 100%;
        /*width: 180%;*/
        overflow: hidden;

    }
    .el-menu{
        /*width: 180px;*/
        height: 100%;
        /*outline: 1px solid red;*/
        overflow: hidden;

    }
    .logoCalzz{
        height: 60px;
        background-color: rgb(99,168,235);
        overflow: hidden;
        line-height: 60px;
        text-align: center;
    }
    .main_router{
        overflow-x: hidden;
    }
    /*/deep/.el-scrollbar__wrap {*/
    /*    overflow-x: hidden;*/
    /*}*/

    /deep/.el-submenu__title:hover{
        background-color: #6a707a!important;
    }
    .backHomeScrollbar{
        /*outline: 1px solid red;*/
        height: 86vh;
    }
    /deep/.el-scrollbar__bar.is-horizontal{
        height: 0;
    }
</style>